

<!-- 指标弹窗 -->

<script setup>
    import { computed } from "vue";
    import QueryTAbs from "@/components/tables/QueryTabs3.vue"
    import Bar from "@/components/tables/bar.vue"
    const props = defineProps({
      visible: {
        type: Boolean,
        default: false,
      },
      title: {
        type: String,
        default: "",
      },
      isFullScreen: {
        type: Boolean,
        default: false,
      },
      dataChange: {
        type: String,
        default: "",
      },
      tableData:{
          type:Object,
          default:{}
      },
      barData:{
        type:Object,
        default:{}
      }
    
    });
    
    const emits = defineEmits(["close", "update:visible"]);
    
    const dialogVisible = computed({
      get: () => props.visible,
      set: (val) => {
        emits("update:visible", val);
      },
    });
    </script>
    
    <template>
      <el-dialog
        v-model="dialogVisible"
        class="dialog dialog-animation default"
        :close-on-click-modal="false"
        :fullscreen="isFullScreen"
        @close="
          () => {
            emits('close');
          }
        "
      > 
        <QueryTAbs :tableData="tableData"  v-if="tableData.X==1"/>
         <Bar v-if="barData.X==2"/>
        <template #header>
          <div
            class="dialog_title jb p75"
            :class="isFullScreen ? 'size40' : 'size30'"
          >
            {{ props.title }}
            <slot name="header"></slot>
          </div>
        </template>
        <slot></slot>
      </el-dialog>
    </template>
    
    <style lang="less">
    // 全局修改关闭按钮样式
    .el-dialog__headerbtn .el-dialog__close,
    .el-dialog__headerbtn:focus .el-dialog__close,
    .el-dialog__headerbtn:hover .el-dialog__close {
      opacity: 0;
    }
    
    @keyframes dialog-fade-in {
      0% {
        transform: scale(0.2);
        opacity: 0;
      }
    
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    /* 进入的过渡效果 */
    .dialog-animation {
      animation: dialog-fade-in 1s ease-in;
    }
    
    .dialog {
      position: absolute;
      z-index: 999999;
      margin: 0;
      padding: 0;
      .dialog_title {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      }
    }
    
    .bg1 {
      background: url("../../static/Dia/1744599651896.jpg") no-repeat;
    }
    .bg2 {
      background: url("../../static/Dia/1744600172120.jpg") no-repeat;
    }
    .bg3 {
      background: url("../../static/Dia/1744600320970.jpg") no-repeat;
    }
    .bg4 {
      background: url("../../static/Dia/1744600744119.jpg") no-repeat;
    }
    .default {
      width: 1670px;
      height: 621px;
      left: 1085px;
      top: 230px;
      background-color: #031b48;
    
      background-size: cover;
      background-position: center;
      .el-dialog__header {
        padding: 0;
        height: 8%;
      }
      .el-dialog__body {
        height: 92%;
      }
    }
    
    .fullscreen {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      //background: url("@/assets/images1/bgggggggg.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
      .el-dialog__header {
        padding: 0;
        height: 8%;
      }
      .el-dialog__body {
        height: 92%;
      }
    }
    
    .size30 {
      font-size: 1.875rem;
    }
    
    .size40 {
      font-size: 45px;
    }
    
    .jb {
      font-weight: bold;
      /* 调整为更亮的浅蓝色 */
      background: linear-gradient(to bottom, #ffffff, #92deff);
      -webkit-background-clip: text;
      color: transparent;
      background-clip: text;
      display: inline-block;
    }
    
    .p75 {
      font-family: "P75";
    }
    </style>
    